<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

     <div>
       <input type="checkbox" name="aa" value="0" />0
         <input type="checkbox" name=" aa " value="1" />1
         <input type="checkbox" name=" aa " value="2" />2
         <input type="checkbox" name=" aa " value="3" />3
         <input type="button" onclick="abc()" value="提 交" />
         <div id="allselect"></div>
     </div>



     <div>
        <form name="a">
            <select name="a" size="1" onchange="_sel(this)">
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
            </select>
        </form>
    </div>



    <div>
        用户名：<input type="text" id="username"/><br/>
        密  码：<input type="password" id="password"/><br/>
       确认密码：<input type="password" id="password1"/><br/>
        <button id="btnSubmit" type="button">提交</button><br/>
    </div>



    <table>
        <tr>
            <td>留言</td>
            <td id="number"> 0 </td>
        </tr>
        <tr>
            <td colspan=2>
                <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
            </td>
        </tr>
    </table>
    

</head>
<body>
    <script src="./JQuery.min.js"></script>
    <script>
    // 7、题目描述
    // 用jQuery编程实现获取选中复选框值
    // HTML结构如下：
    console.log(`======= 第7题 =======`);
        function abc() {
            $(':checkbox').each(function () {
              if (this.checked) {
                    console.log(this.value);
              }
            })
        }


        // 8、题目描述
        // 实现sel函数显示当前选项的文本和值
        console.log(`======= 第8题 =======`);    

            function _sel() {
                $('option').each(function () {
                    if (this.selected) {
                        console.log(this.innerText + ' ' +this.value);
                    }
                })
            }




        //     9、题目描述
        // 要求用jQuery完成:  点击id为btn的按钮
        
        // a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。
        
        // b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示
        console.log(`======= 第9题 =======`);


    // $('#btnSubmit').click(checkName)
    //     function checkName() {
    //         if ($('#username')[0].value == '') {
    //             alert('用户名不能为空');
    //         }
    //         if (($('#password')[0].value).length < 6) {
    //             alert('你输入的密码长度不可以少于6位')
    //         }
    //     }


        $('#btnSubmit').click(function () {
                    if($('#username').val() == ''){
                        alert('用户名不能为空')
                    }
                    if (($('#password').val().length) < 6) {
                        alert('你输入的密码长度不可以少于6位')
                    }
        })



        // 10、题目描述
        
        // 在下面的HTML文档中，编写函数test() ,实现如下功能：
        
        // （1）当多行文本框中的字符数超过20个，只截取20个字符
        
        // （2）在id为number的td中显示文本框的字符个数
        
        // HTML结构如下：
        console.log(`======= 第10题 =======`);

        function test(){
            var lens = $('#feedBack').val().length;
            var txt = $('#feedBack').val().substring(0,20);
            $('#feedBack').val(txt);
            if ( lens <= 20) {
                $('#number').text(lens)
            }else{
                $('#number').text(20)
            }
        }
    </script>
</body>
</html>